<template>
  <div class="content_box">
    <div class="list_box" v-if="list.length">
      <div @click="clickCz(item)" class="list" v-for="(item,index) in list" :key="index">
        <div>
          <p>封面图：<img style="width: 100rpx;height: 100rpx;" :src="item.img" alt=""></p>
          <p>活动名称：{{item.name}}</p>
          <p>是否推荐：{{item.suggest?'推荐':'不推荐'}}</p>
          <p>是否上架：{{item.status?'上架':'下架'}}</p>
          <p v-if="item.suggest">首页弹窗封面：<img style="width: 100rpx;height: 100rpx;" :src="item.popupImg" alt=""></p>
          <p v-if="!item.suggest" class="anniu_ewm" @click.stop="scEwm(item)">生成二维码</p>
        </div>
        <van-icon color="#999" name="arrow" />
      </div>
  
    </div>
    <div class="no_data" v-else>
      <img src="/static/images/no_sp.png" alt="">
      <p class="text">暂无活动列表</p>
    </div>
    <!-- 弹窗 -->
    <div class="pop_box">
      <van-popup position="bottom" :show="isAdmin" @close="closePop">
        <div class="box">
          <div class="title">
            <p>活动操作</p>
          </div>
          <div class="list">
            <p class="name">编辑活动</p>
            <p class="icon" @click="toEdit(true)">
              编辑
            </p>
          </div>
          <div class="list" @click="del">
            <p class="name">删除活动</p>
            <p class="icon">
              删除
            </p>
          </div>
          <p class="line"></p>
          <p class="quxiao" @click="isAdmin = false">取消</p>
        </div>
      </van-popup>
    </div>

    <!-- 二维码弹窗 -->
    <div>
      <van-overlay :show="ewmPop" @click="onClickHide">
        <div class="wrapper">
          <div class="block">
            <img :src="activityImg" alt="">
            <van-button @click="ewmPop = false" plain type="info" style="margin-right:80rpx">关闭弹窗</van-button>
            <van-button type="info" @click="cunImg">保存图片</van-button>
          </div> 
        </div>
      </van-overlay>
    </div>
    <div class="anniu_box" :style="{paddingBottom:isIphoneXnum+'px'}">
      <div class="box" :style="{paddingBottom:isIphoneXnum+'px'}">
        <p class="anniu" @click="toEdit(false)"><van-icon name="plus" /> 新增活动</p>
      </div>
    </div>
  </div>
</template>
 
<script>
import {
  getActivityList,
  delActivity,
  createAppletCode,
} from "@/api/index";
import { Debounce } from "@/utils/index";
export default {
  components: {},
  data() {
    return {
      list:[],
      id:'',
      isAdmin:false,
      isIphoneXnum:false,
      param:{
        current:1,
        size:50,
      },
      storeId:'',
      ewmPop:false,
      activityImg:''
    };
  },
  onShow() {
    this.getList()
  },

  methods: {
    cunImg(){
      const _this = this;
      wx.downloadFile({
        url: this.activityImg,//图片地址
        success: function (res) {
          //图片保存到本地
          wx.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: function (data) {
              _this.$toast('保存成功~')
            },
            fail: function (err) {
              if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {
                // 这边微信做过调整，必须要在按钮中触发，因此需要在弹框回调中进行调用
                wx.showModal({
                  title: '提示',
                  content: '需要您授权保存相册',
                  showCancel: false,
                  success: modalSuccess => {
                    wx.openSetting({
                      success(settingdata) {
                        console.log("settingdata", settingdata)
                        if (settingdata.authSetting['scope.writePhotosAlbum']) {
                          wx.showModal({
                            title: '提示',
                            content: '获取权限成功,再次点击图片即可保存',
                            showCancel: false,
                          })
                        } else {
                          wx.showModal({
                            title: '提示',
                            content: '获取权限失败，将无法保存到相册哦~',
                            showCancel: false,
                          })
                        }
                      },
                      fail(failData) {
                        console.log("failData", failData)
                      },
                      complete(finishData) {
                        console.log("finishData", finishData)
                      }
                    })
                  }
                })
              }
            },
            complete(res) {
              wx.hideLoading()
            }
          })
        }
      })
    },

    // 生成二维码
    scEwm:Debounce(function (item) {
      this.$showLoading('生成中...')
      console.log(item)
      let data = {
        activityId:item.id,
        type:1
      }
      createAppletCode(data).then(res=>{
        if(res.statusCode == '00000'){
          wx.hideLoading()
          this.ewmPop = true
          this.activityImg = res.data
        }else{
          wx.hideLoading()
          this.$toast(res.message)
        }
      })
    },300),

    // 关闭弹窗
    closePop(){
      this.isAdmin = false
    },

    // 关闭弹窗
    closePop1(){
      this.ewmPop = false
    },

    // 操作弹窗
    clickCz(item){
      this.isAdmin = true
      this.id = item.id
    },
    toEdit(state){
      this.isAdmin = false
      if(state){
        wx.navigateTo({
          url: `/pages/home/hdAdmin/edit/main?id=${this.id}&storeId=${this.storeId}`,
        });
        return
      }
      wx.navigateTo({
        url: `/pages/home/hdAdmin/edit/main?storeId=${this.storeId}`,
      });
    },

    // 活动列表
    getList(){
      this.$showLoading('加载中...')
      getActivityList().then(res=>{
        if(res.statusCode == '00000'){
          this.list = res.data
          wx.hideLoading()
          wx.hideNavigationBarLoading();
          wx.stopPullDownRefresh();
        }else{
          wx.hideLoading()
          wx.hideNavigationBarLoading();
          wx.stopPullDownRefresh();
        }
      })
    },

    // 删除优惠券
    del(){
      wx.showModal({
        title: "温馨提示",
        content: "确定删除该条数据~",
        confirmText:'确认删除',
        success: (res)=>{
          if (res.confirm) {
            delActivity({id:this.id}).then(res=>{
              if(res.statusCode == '00000'){
                this.isAdmin = false
                this.getList()
              }else{
                this.$toast(res.message)
              }
            })
          }
        },
      });
    },
  },
  onLoad(options) {
    console.log(options)
    //判断手机机型，动态给底部添加样式
    wx.getSystemInfo({
      success: (res) => {
        console.log("手机信息res" + res.model);
        let modelmes = res.model;
        if (
          modelmes.search("iPhone 13") != -1 ||
          modelmes.search("iPhone 12") != -1 ||
          modelmes.search("iPhone 11") != -1 ||
          modelmes.search("iPhone X") != -1 ||
          modelmes.search("iPhone XR") != -1 ||
          modelmes.search("iPhone XS") != -1
        ) {
          this.isIphoneXnum = 25;
        } else {
          this.isIphoneXnum = 0;
        }
      },
    });
    this.storeId = options.storeId
  },
  // 下拉刷新
  onPullDownRefresh(){
    //在当前页面显示导航条加载动画
    wx.showNavigationBarLoading();
    this.getList()
  },
  onHide() {},

  onUnload() {},
};
</script>

<style lang="scss" scoped>
.list_box{
  margin:0 30rpx;
  .list{
    border-bottom:1px solid #f5f5f5;
    font-size:30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom:30rpx;
    p{
      margin-bottom:10rpx;
      span{
        display: flex;
        height: 28rpx;
        line-height: 28rpx;
        background: #1E68FF;
        border-radius: 8rpx;
        text-align: center;
        color:#fff;
        font-size:20rpx;
        margin-left:10rpx;
        align-items: center;
        justify-content: center;
        padding:0 10rpx;
      }
    }
  }
}
.anniu_box{
  height: 150rpx;
  width: 100%;
  background: #fff;
  
  .box{
    width: 92%;
    height: 150rpx;
    line-height: 150rpx;
    padding:0 30rpx;
    background: #fff;
    display: flex;
    align-items: center;
    position: fixed;
  bottom:0;
  left: 0;
    .anniu{
      box-shadow: 0rpx 10rpx 20rpx #CEDBFA;
      border:none;
      width: 100%;
      height: 88rpx;
      line-height: 88rpx;
      background: #1E68FF;
      border-radius: 100rpx;
      text-align: center;
      color: #fff;
      font-size: 30rpx;
    }
  }
}
.no_data{
  text-align: center;
  font-size:28rpx;
  color:#333;
  padding-top:150rpx;
  .text{
    font-weight: 500;
    color:#999;
  }
  img{
    width: 248rpx;
    height: 248rpx;
  }
}
.pop_box{
  /deep/ .van-popup {
    border-top-right-radius: 20rpx !important;
    border-top-left-radius: 20rpx !important;
  }
  .box{
    .title{
      height: 104rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color:#323233;
      font-size:34rpx;
      border-bottom:1px solid #f0f0f0;
      position: relative;
      .tb{
        position: absolute;
        right:30rpx;
      }
    }
    .list{
      height: 104rpx;
      border-bottom:1px solid #f5f5f5;
      padding:0 40rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .name{
        font-size:32rpx;
        color:#323233;
      }
      .icon{
        width: 196rpx;
        height: 60rpx;
        display:flex;
        align-items: center;
        justify-content: center;
        border:1px solid #222;
        color:#222;
        font-size:28rpx;
        font-weight: 500;
        border-radius: 50rpx;
        &.on{
          opacity: 0.5;
        }
      }
      div{
        display: flex;
      }
      .tips{
        font-size:24rpx;
        color:red;
        margin-top:10rpx;
      }
      img{
        width: 32rpx;
        height: 32rpx;
        margin-right:10rpx;
      }
    }
    .line{
      width: 100%;
      height: 16rpx;
      background: #f8f8f8;
    }
    .quxiao{
      height: 100rpx;
      line-height: 100rpx;
      font-size:32rpx;
      color:#323233;
      text-align: center;
    }
  }
  
}
.anniu_ewm{
  width: 180rpx;
  padding:8rpx 0;
  text-align: center;
  border:1px solid #1E68FF;
  color:#1E68FF;
  border-radius: 10rpx;
  font-size:26rpx;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 80%;
  height: 60%;
  background-color: #fff;
  border-radius: 10rpx;
  text-align: center;
  img{
    width:80%;
    height: 70%;
    margin:30rpx 0;
  }
}
</style>
